<template>
  <base-paenl>
    <span slot="header">项目信息</span>
    <div slot="main" class="slot-main">
      <el-scrollbar class="panel-scrollbar">
        <div
          v-for="(item, index) of fieldList"
          :key="index"
          class="panel-item"
          @click="showDialog(item)"
        >
          <div class="panel-row">
            <div class="panel-row-bg"></div>
            <div class="panel-row-content">
              <div
                class="panel-row-content-name panel-row-content-name1"
                :title="item.name"
              >
                {{ item.name }}
              </div>
              <div
                v-if="item.field === 'sjrssj'"
                class="panel-row-content-value panel-row-content-value1"
                :title="dealTime(projectInfo[item.field])"
              >
                {{ dealTime(projectInfo[item.field]) }}
              </div>
              <div
                v-else-if="!item.field2"
                class="panel-row-content-value panel-row-content-value1"
                :title="projectInfo[item.field]"
              >
                {{ projectInfo[item.field] }}
              </div>
              <div
                v-else
                class="panel-row-content-value panel-row-content-value1"
                :title="
                  dealTime(projectInfo[item.field]) +
                    '-' +
                    dealTime(projectInfo[item.field2])
                "
              >
                {{ dealTime(projectInfo[item.field]) }}-{{
                  dealTime(projectInfo[item.field2])
                }}
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div>
        <div class="title">项目标签</div>
        <div class="panel-tag-group">
          <div
            v-for="item in tags"
            class="tag"
            :style="{
              width: item.width
            }"
          >
            <img
              class="img-position"
              :src="
                (projectInfo.xmbq || '').includes(item.field)
                  ? item.activeImg
                  : item.img
              "
              :width="item.width"
              height="29px"
            />
            <span
              :style="{
                color: (projectInfo.xmbq || '').includes(item.field)
                  ? '#e3bf67'
                  : '#fff'
              }"
              >{{ item.name }}</span
            >
          </div>
        </div>
        <div class="btn-groups">
          <div
            :class="
              activeBtn == 'InspetionHistory'
                ? 'grid-info-operate-div grid-info-operate-div-active'
                : 'grid-info-operate-div'
            "
            @click="handleClick('InspetionHistory')"
          >
            <img
              :src="
                activeBtn == 'InspetionHistory'
                  ? require('../../assets/images/panels/xunchalishihou.png')
                  : require('../../assets/images/panels/xunchalishiqian.png')
              "
              width="14px"
              height="16px"
              style="margin: 2px 10px 0 0"
            />巡查历史
          </div>
          <div
            :class="
              activeBtn == 'InspetionTable'
                ? 'grid-info-operate-div grid-info-operate-div-active'
                : 'grid-info-operate-div'
            "
            @click="handleClick('InspetionTable')"
          >
            <img
              :src="
                activeBtn == 'InspetionTable'
                  ? require('../../assets/images/panels/xianshangxunchahou.png')
                  : require('../../assets/images/panels/xianshangxunchaqian.png')
              "
              width="14px"
              height="16px"
              style="margin: 2px 10px 0 0"
            />线上巡查
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";

@Component({
  name: "ProjectInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  get projectInfo() {
    return this.$store.getters["videoData/projectInfo"];
  }
  activeBtn = "";
  tags: any = [
    {
      name: "政策性市场化租赁房源",
      field: "zcxschfy",
      width: "160px",
      img: require("../../assets/images/panels/biaotibeijing10zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing10zi-hou.png")
    },
    {
      name: "地方财补",
      field: "dfcb",
      width: "78px",
      img: require("../../assets/images/panels/biaotibeijing4zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing4zi-hou.png")
    },
    {
      name: "政策扶持",
      field: "zcfc",
      width: "78px",
      img: require("../../assets/images/panels/biaotibeijing4zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing4zi-hou.png")
    },
    {
      name: "保障性租赁住房",
      field: "bzxzlzf",
      width: "124px",
      img: require("../../assets/images/panels/biaotibeijing7zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing7zi-hou.png")
    },
    {
      name: "中央财补",
      field: "zycb",
      width: "78px",
      img: require("../../assets/images/panels/biaotibeijing4zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing4zi-hou.png")
    },
    {
      name: "公房",
      field: "gf",
      width: "52px",
      img: require("../../assets/images/panels/biaotibeijing2zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing2zi-hou.png")
    },
    {
      name: "保障性住房",
      field: "bzxzf",
      width: "92px",
      img: require("../../assets/images/panels/biaotibeijing5zi-qian.png"),
      activeImg: require("../../assets/images/panels/biaotibeijing5zi-hou.png")
    }
  ];
  fieldList = [];
  mounted() {
    const win: any = window;
    this.fieldList = win.videoDataConfig.projectField;
  }
  //获取历史巡查日历

  showDialog(item: any) {
    console.log(item);
  }
  dealTime(time: any) {
    try {
      if (time) {
        const timeArr = time.split("T");
        return timeArr[0];
      }
      return "";
    } catch (error) {
      console.log(error, "time");
      return "";
    }
  }
  handleClick(name: string) {
    this.activeBtn = name;
    this.$store.commit("videoPanel/setDialogShow", true);
    this.$store.commit("videoPanel/setDialog", name);
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 628px;
}
.panel-scrollbar {
  height: 400px;
}
.title {
  width: 388px;
  padding-left: 21px;
  color: #fff;
  height: 17px;
  background-image: url(../../assets/images/panels/cibiaoti.png);
  background-size: 100% 100%;
  margin: 21px 0px;
  line-height: 17px;
}
.panel-tag-group {
  color: #ffffff;
  font-size: 14px;
  display: flex;
  flex-flow: row wrap;
  .tag {
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 12px 12px 0px;
  }

  .img-position {
    position: absolute;
  }
}
.btn-groups {
  display: flex;
  // margin-top: 20px;
  .grid-info-operate-div {
    width: 190px;
    height: 32px;
    background: url("../../assets/images/panels/guijihuifanganniubeijingqian.png");
    background-size: 100% 100%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
  }
  .grid-info-operate-div-active {
    background: url("../../assets/images/panels/guijihuifanganniubeijinghou.png");
    background-size: 100% 100%;
    color: #08ebff;
  }
}
</style>
